<!DOCTYPE html>
<html>
<head>
	<title>	</title>
	<style type="text/css">
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, em, button{
    margin: 0;
    padding: 0;
}

.pageContent{
	max-width: 1500px;
	min-width: 1000px;
	height: 300px;
	margin: auto;
	position: relative;
	overflow: hidden;
}

.imgItem{
	position: absolute;
	top:0px;
	left:0px;	
	opacity: 0;	
	transition: opacity  1s ease;
}


.txtContent{
	position: absolute;
	bottom: 0px;
	left:0px;
	width: 100%;	
	height: 5px;
	transition: height 0.5s ease;
	overflow: hidden;
}
.txtContent:hover{
	height: 50px;
}

.txtContent p{
	height: 45px;
	background-color: #333;
	padding-top:5px;
	float: left;
	width: 12.35%;
	text-align: center;	
	color: #fff;
	margin-right: 0.15% ;
}

.txtContent p:hover{
	background-color: #ff8c00;
    
}

.txtContent p span{
	display: block;
	margin: 0px;
	padding: 0px;

}

.btn{
	width: 60px;
	height: 80px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top:110px;

}

.prevItem{
	left:20px;
	background-image: url("https://images-cn.ssl-images-amazon.com/images/G/28/gwfloor/static/images/arrow-l._CB349916960_.png");
}
.nextItem{
	right:20px;
	background-image: url("https://images-cn.ssl-images-amazon.com/images/G/28/gwfloor/static/images/arrow-r._CB349916960_.png");
}

	</style>

</head>
<body>
		<div class="pageContent">	
			<!-- 图片区 -->
			<div id="imgContainer">
				<a href="#" class="imgItem"><img src="https://images-cn.ssl-images-amazon.com/images/G/28/kindle/design/2018/Device/180521_ATF1500x300_kindlefamily_dvc._CB495766035_.jpg"></a>
				<a href="#" class="imgItem"><img src="https://images-cn.ssl-images-amazon.com/images/G/28/img18/event/mumbaby/KV/KV3._CB495516898_.jpg"></a>
				<a href="#" class="imgItem"><img src="https://images-cn.ssl-images-amazon.com/images/G/28/xywang/201805/sx_20180423_1500x300_redmay._CB496868613_.jpg"></a>
				<a href="#" class="imgItem"><img src="https://images-cn.ssl-images-amazon.com/images/G/28/img18/softline/watch/05/hp_20180511_watch_1500300_biaobai._CB495387954_.jpg"></a>
				<a href="#" class="imgItem"><img src="https://images-cn.ssl-images-amazon.com/images/G/28/Jingjin/ATF/gz_lacie_1500x300._CB495769035_.jpg"></a>
				<a href="#" class="imgItem"><img src="https://images-cn.ssl-images-amazon.com/images/G/28/Yuhao/2018POC/May/200-80/0521ATF._CB477351586_.jpg"></a>
				<a href="#" class="imgItem"><img src="https://images-cn.ssl-images-amazon.com/images/G/28/gongzhen/OHL/0511/qionggel_2018-03-12T03-36_d71f56_lqg_180312_1500300_sports._CB495399110_.jpg"></a>
				<a href="#" class="imgItem"><img src="https://images-cn.ssl-images-amazon.com/images/G/28/CN-Ad/1500-300-tcg-lego-1-1._CB495767256_.jpg"></a>
			</div>
			<!-- 文字区 -->
			<div class="txtContent">	
				<p><span>上排1</span><span>下排1</span></p>
				<p><span>上排2</span><span>下排2</span></p>
				<p><span>上排3</span><span>下排3</span></p>
				<p><span>上排4</span><span>下排4</span></p>
				<p><span>上排5</span><span>下排5</span></p>
				<p><span>上排6</span><span>下排6</span></p>
				<p><span>上排7</span><span>下排7</span></p>
				<p><span>上排8</span><span>下排8</span></p>
			</div>
			<!-- 按钮区 -->
			<div>
				<p class="btn prevItem"></p>
				<p class="btn nextItem"></p>
			</div>
			<!-- 广告标识区 -->
			<p></p>
		</div>

<script type="text/javascript">
	var oImgContainer=document.getElementById('imgContainer');
	var cImgs=oImgContainer.children;
	console.log(cImgs);
	var currentNo=0;
	cImgs[currentNo].style.opacity=1;

	var t=setInterval(function(){
		for (var i = 0; i < cImgs.length; i++) {
			cImgs[i].style.opacity=0;
		}
		currentNo++;
		if(currentNo>=cImgs.length) currentNo=0;
		cImgs[currentNo].style.opacity=1;

	},2000);

	//鼠标移入轮播区域，停止自动播放，移出还原播放
	//单击向前按钮，前向循环换片
	//单机向后按钮，后向循环换片
	//鼠标移入文字区，显示对应图片（指定编号换片）
	//尽量使用函数把相同的功能实现



</script>


</body>
</html>